<template>
  <div class="app">
    <div class="header">
      <span style="position:absolute;left:0;top:0;" @click="$router.go(-1)" v-if="$route.path!='/home'" class="goback">
        <van-icon style="margin-right:3px;" name="arrow-left" />
        返回
      </span>
      <span >黑马商城.vant</span>
    </div>
    <div class="main">
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :info="$store.getters.count" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {}
};
</script>
<style>
html,
body,
.app {
  height: 100%;
}
.app {
  box-sizing: border-box;
  padding: 40px 0 50px 0;
}
</style>
<style scoped lang="less">
.header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: hotpink;
  color: #fff;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}
.main {
  width:100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x:hidden;
}

.v-enter{
  transform: translateX(100%);
}
.v-enter-active{
  transition: transform 0.3s ease;
}
.v-enter-to{
  transform: translateX(0);
}

.v-leave{
  opacity: 1;
}
.v-leave-active{
  transition: opacity 0.3s;
}
.v-leave-to{
  opacity: 0.4;
}
</style>